import React, { useState } from 'react'
import { Modal, Button } from 'antd'
import './index.styl'

/**
* @param {object} data 弹框所需要的信息
* ------------以下为data对象中所需要的属性参数
* @param {string} title 弹框头部的标题
* @param {string} information 弹框提示信息
* @param {string} status 用于点击的文字
* @param {string} size 设置点击文字的大小，单位rem, 默认字体大小为0.14rem（可选）
*/

export default function MessageModel ({ data, handleClick, display, textColor }) {
    const {
        title: title = '删除信息',
        information: information = '确定删除该条信息吗？',
        status: status = '删除',
        size: size = '14px'
    } = data

    // 控制弹框显示隐藏
    const [visible, changeState]=useState({ visible: false })

    function onOk () {
        changeState(false)
        handleClick()
    }
    return (
        <div style={{display: display ? display : 'inline-block', marginRight: '0.16rem'}}>
            <span
            className='clickText'
            onClick={() => changeState({ visible: true })}
            style={{ fontSize: size ? size :'14px', color: '#1e66dc'}}
            >{status}</span>
            <div>
                <Modal
                width={'4rem'}
                visible={visible.visible}
                footer={null}
                closable={false}
                onOk={onOk }
                onCancel={() => changeState({ visible: false })}
                bodyStyle={{ padding: 0 }}
                maskClosable={false}
                mask={false}
                >
                    <div className='messageModel' >
                        <div className='headTitle'>
                            <span className='titleText'>{title}</span>
                            <span 
                            onClick={() => changeState({ visible: false })} 
                            className='cancelBtn'
                            style={{ cursor: 'pointer'}}
                            >X</span>
                        </div>
                        <div className='bodyConten'>
                            <span className='information'>{information}</span>
                        </div>
                        <div className='btnsBox'>
                            <div>
                                <Button
                                type='default'
                                className='cancleBtn'
                                onClick={() => changeState({ visible: false })}
                                >取消</Button>
                                <Button
                                type='primary'
                                className='okBtn'
                                onClick={onOk}
                                >确定</Button>
                            </div>
                        </div>
                    </div>
                </Modal>
            </div>
        </div>
    )
}
